<!DOCTYPE html>
<html  lang="zh">
<head>
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="utf-8" />

<meta name="generator" content="Hexo 3.9.0" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<title>shader学习7-透明效果 - 游戏人生</title>


    <meta name="description" content="shade学习">
<meta name="keywords" content="学习">
<meta property="og:type" content="article">
<meta property="og:title" content="shader学习7-透明效果">
<meta property="og:url" content="http://cloundgame.gitee.io/mystudy/2020/03/01/shader学习7-透明效果/index.html">
<meta property="og:site_name" content="游戏人生">
<meta property="og:description" content="shade学习">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://cloundgame.gitee.io/mystudy/images/og_image.png">
<meta property="og:updated_time" content="2020-05-02T12:04:07.428Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="shader学习7-透明效果">
<meta name="twitter:description" content="shade学习">
<meta name="twitter:image" content="http://cloundgame.gitee.io/mystudy/images/og_image.png">







<link rel="icon" href="/mystudy/images/favicon.svg">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-dark.css">


    
    
    
    <style>body>.footer,body>.navbar,body>.section{opacity:0}</style>
    

    
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">
    

    
    

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">


    
    
    
    

<link rel="stylesheet" href="/mystudy/css/back-to-top.css">


    
    

    
    
    
    

    
    
<link rel="stylesheet" href="/mystudy/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

    
    
    
        <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    

    


<link rel="stylesheet" href="/mystudy/css/style.css"><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</head>
<body class="is-3-column">
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/mystudy/">
            
                <img src="/mystudy/images/logo.svg" alt="shader学习7-透明效果" height="28">
            
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/mystudy/">主页</a>
                
                <a class="navbar-item"
                href="/mystudy/archives">日志</a>
                
                <a class="navbar-item"
                href="/mystudy/categories">分类</a>
                
                <a class="navbar-item"
                href="/mystudy/">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                    
                    
                    <a class="navbar-item" target="_blank" title="Download on GitHub" href="https://github.com/koliy/koliy.github.io">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                    
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main"><div class="card">
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2020-03-01T02:07:16.000Z">2020-03-01</time>
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/mystudy/categories/shade学习/">shade学习</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    25 分钟 读完 (大约 3728 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    <span id="busuanzi_value_page_pv">0</span>次访问
                </span>
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                shader学习7-透明效果
            
        </h1>
        <div class="content">
            <h2 id="透明效果"><a href="#透明效果" class="headerlink" title="透明效果"></a><strong>透明效果</strong></h2><p>要想实现透明效果，通常在渲染模型时控制它的 <strong>透明通道</strong>。</p>
<p><strong>当开启透明混合后，一个物体被渲染到屏幕上时，每个片元除了颜色值和深度值外，还有另一个属性–透明度。当透明度为1时，表示像素完全不透明，为0时，则表示该像素完全不显示</strong></p>
<a id="more"></a>

<p>在unity中，通常使用两种方法来实现透明效果:</p>
<ul>
<li>透明测试(Alpha Test)</li>
<li>透明混合(Alpha Blending)</li>
</ul>
<h2 id="深度缓冲-z-buffer"><a href="#深度缓冲-z-buffer" class="headerlink" title="深度缓冲(z-buffer)"></a><strong>深度缓冲(z-buffer)</strong></h2><p>在实时渲染中，深度缓冲是用于解决可见性问题的，它可以决定哪个物体的哪些部分被渲染在前面，而哪些部分会被其它物体遮挡。</p>
<p><strong>基本思想:</strong></p>
<p>根据该片元距离camera的间距值和深度缓冲中的值比较，来决定该片元是否应该渲染到屏幕上。</p>
<ul>
<li>片元离camera越近，间距越小，说明片元越靠近屏幕渲染。</li>
<li>间距越大，说明片元远离屏幕，有可能被屏幕近的物体挡住，或不在远视角范围内，则这个片元不应该渲染到屏幕上。</li>
</ul>
<p>因此，当渲染一个片元时，需要把它的深度值和已经存在于深度缓冲(z-buffer)中的值进行比较(比较需要开启深度测试 z-test),如果它的深度值大于z-buffer中的值，说明该片元比前一个片元后面，离camera更远，会被前一个片元遮挡，这个片元不应该渲染到屏幕上.</p>
<p>小于的话，说明这个片元在前一个片元前面，离camera更近，应该在前一个片元前面渲染到屏幕上，这个片元应该覆盖掉此时颜色缓冲中的像素值，并把它的深度值更新到z-buffer中(需要开启深度写入z-write).</p>
<p><strong>使用深度缓冲z-buffer,可以让我们不用关心<em>不透明物体</em>的渲染顺序,因为在进行深度测试时z-test，会判断出物体之间距离camera的深度值，从而决定哪些片元写入颜色缓冲中.</strong><br><strong>当想实现透明效果时，我们就需要关心物体间的渲染顺序了，因为当使用透明度混合时，我们关闭了深度写入ZWrite</strong></p>
<h2 id="透明度测试"><a href="#透明度测试" class="headerlink" title="透明度测试:"></a><strong>透明度测试:</strong></h2><p>这种方法无法得到半透明效果，要么完全透明，既看不到，要么完全不透明，就像不透明物体那样。</p>
<p>机制:</p>
<ul>
<li>当一个片元的透明度不满足条件通常小于某个值时，该片元会被丢弃。不再进行任何处理，既完全看不到</li>
<li>当该片元的透明度满足条件时，该片元会按照普通的不透明物体的处理方式来处理，既进行深度测试ZTest，深度写入ZWrite。</li>
</ul>
<p><strong>说明透明度测试，不需要关闭深度写入ZWrite</strong></p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">SubShader&#123;</span><br><span class="line">	Tags&#123;<span class="hljs-string">"Queue"</span>=<span class="hljs-string">"AlphaTest"</span>&#125;</span><br><span class="line">	Pass&#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>clip函数用于透明度测试</strong></p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">void</span> clip(float1/<span class="hljs-number">2</span>/<span class="hljs-number">3</span>/<span class="hljs-number">4</span> x)</span><br><span class="line">描述:</span><br><span class="line">给定的参数的任何一个分量是负数的话，就会舍弃当前像素的输出颜色。</span><br><span class="line"><span class="hljs-keyword">void</span> clip(float4 x)&#123;</span><br><span class="line">	<span class="hljs-keyword">if</span>(any(x &lt; <span class="hljs-number">0</span>) discard;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">discard: 舍弃当前片元</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// Upgrade <span class="hljs-doctag">NOTE:</span> replaced '_Object2World' with 'unity_ObjectToWorld'</span></span><br><span class="line"></span><br><span class="line">Shader <span class="hljs-string">"MyTest/Test3/AlphaTest"</span>&#123;</span><br><span class="line">	Properties&#123;</span><br><span class="line">		_Color(<span class="hljs-string">"Color"</span>,Color)=(<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>)</span><br><span class="line">		_MainTex(<span class="hljs-string">"Main Tex"</span>,<span class="hljs-number">2</span>D)=<span class="hljs-string">"white"</span>&#123;&#125;</span><br><span class="line">		_CullOff(<span class="hljs-string">"CullOff"</span>,Range(<span class="hljs-number">0</span>,<span class="hljs-number">1</span>))=<span class="hljs-number">0</span></span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	SubShader&#123;</span><br><span class="line">		Tags&#123;<span class="hljs-string">"Queue"</span>=<span class="hljs-string">"AlphaTest"</span> <span class="hljs-string">"RenderType"</span>=<span class="hljs-string">"TransparentCutout"</span> <span class="hljs-string">"IgnoreProjector"</span>=<span class="hljs-string">"true"</span> &#125;</span><br><span class="line"></span><br><span class="line">		Pass&#123;</span><br><span class="line">			Tags&#123;<span class="hljs-string">"LightMode"</span>=<span class="hljs-string">"Forwardbase"</span>&#125;</span><br><span class="line"></span><br><span class="line">			CGPROGRAM</span><br><span class="line">			#include "Lighting.cginc"</span><br><span class="line">			#include "UnityCG.cginc"</span><br><span class="line"></span><br><span class="line">			fixed4 _Color;</span><br><span class="line">			sampler2D _MainTex;</span><br><span class="line">			float4 _MainTex_ST;</span><br><span class="line">			fixed _CullOff;</span><br><span class="line"></span><br><span class="line">			struct a2v&#123;</span><br><span class="line">				float4 pos:POSITION;</span><br><span class="line">				float3 normal:NORMAL;</span><br><span class="line">				float4 tex:TEXCOORD0;</span><br><span class="line">			&#125;;</span><br><span class="line"></span><br><span class="line">			struct v2f&#123;</span><br><span class="line">				float4 pos:SV_POSITION;</span><br><span class="line">				float2 uv:TEXCOORD0;</span><br><span class="line">				float3 worldpos:TEXCOORD1;</span><br><span class="line">				float3 worldnormal:TEXCOORD2;</span><br><span class="line">				</span><br><span class="line">			&#125;;</span><br><span class="line"></span><br><span class="line">			#pragma vertex vert</span><br><span class="line">			#pragma fragment frag</span><br><span class="line"></span><br><span class="line">			v2f vert(a2v v)&#123;</span><br><span class="line">				v2f o;</span><br><span class="line">				o.pos = UnityObjectToClipPos(v.pos);</span><br><span class="line">				o.worldpos = mul(unity_ObjectToWorld,v.pos).xyz;</span><br><span class="line">				o.uv = TRANSFORM_TEX(v.tex,_MainTex);</span><br><span class="line">				o.worldnormal = UnityObjectToWorldNormal(v.normal);</span><br><span class="line"></span><br><span class="line">				<span class="hljs-keyword">return</span> o;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			fixed4 frag(v2f v):SV_Target&#123;</span><br><span class="line">				float3 worldlight = normalize(UnityWorldSpaceLightDir(v.worldpos)).xyz;</span><br><span class="line">				float3 worldnormal = normalize(v.worldnormal).xyz;</span><br><span class="line"></span><br><span class="line">				fixed4 texColor = tex2D(_MainTex,v.uv);</span><br><span class="line">				clip(texColor.a - _CullOff);</span><br><span class="line"></span><br><span class="line">				fixed3 albedo = texColor.rgb *_Color.rgb;</span><br><span class="line">				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo.rgb;</span><br><span class="line"></span><br><span class="line">				fixed3 diffuse = _LightColor0.rgb * albedo *saturate(dot(worldnormal,worldlight));</span><br><span class="line"></span><br><span class="line">				fixed3 color = ambient + diffuse;</span><br><span class="line"></span><br><span class="line">				<span class="hljs-keyword">return</span> fixed4(color,<span class="hljs-number">1</span>);</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			ENDCG</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><em>AlphaTest:</em> 设置渲染顺序</li>
<li><em>TransparentCutout:</em> 指明该shader是一个使用了透明度测试的shader</li>
<li><em>IgnoreProjector:</em> 设置该shader不会受到投影器的影响</li>
</ul>
<p><strong>通常，透明度测试的shader都应该设置这三个标签</strong></p>
<h2 id="透明度混合"><a href="#透明度混合" class="headerlink" title="透明度混合:"></a><strong>透明度混合:</strong></h2><p>这种方式可以得到真正的半透明效果。它会使用当前片元的透明度作为混合因子，与已经存储在颜色缓冲中的颜色进行混合，得到新的颜色。</p>
<p><strong>为什么要关闭深度写入ZWrite?</strong><br>例如，当开启深度测试时ZTest，半透明物体A在不透明物体B前面，A挡住了B，则在开启深度写入ZWrite时，半透明物体A的片元会覆盖掉B的像素，这样就出现奇怪现象，真实场景中，半透明物体A后面的物体应该显示出来。因此在作透明度混合时，需要关闭深度写入ZWrite.<br><strong>透明度混合只关闭了深度写入ZWrite，没有关闭深度测试ZTest，当A在B的后面时，那么就不会再进行混合操作</strong></p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SubShader&#123;</span><br><span class="line">	Tags&#123;<span class="hljs-string">"Queue"</span>=<span class="hljs-string">"Transparent"</span>&#125;</span><br><span class="line">	Pass&#123;</span><br><span class="line">		ZWrite Off</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>ZWrite Off: 用于关闭深度写入，在Pass中，表示只对此Pass有效。</li>
</ul>
<h2 id="渲染顺序"><a href="#渲染顺序" class="headerlink" title="渲染顺序:"></a><strong>渲染顺序:</strong></h2><p><strong>关闭深度写入，则要求渲染顺序控制非常重要</strong></p>
<p>例如：</p>
<ul>
<li>先渲染半透明物体A, 在渲染不透明物体B，由于渲染A时，关闭了深度写入，深度缓冲Z-buffer中没有值，在渲染B时，深度测试时ZTest，发现Z-buffer没有值，则会直接写入颜色缓冲中，B直接覆盖A的颜色，从视觉上来看，B在A的前面，而这和我们设计顺序上错误的，我们想要的视觉效果是半透明物体A在B的前面。</li>
<li>先渲染不透明物体B，在渲染半透明物体A，当在渲染A时，只进行深度测试ZTest，发现A的深度值大于Z-buffer的值，B挡住A，因此，这里有2种情况来控制渲染，1.我们会使用A的透明度来和颜色缓冲中的B的颜色进行混合,得到正确的半透明效果，视觉上显示上半透明物体A显示在B的前面. 2,不进行颜色混合，直接放弃该片元，则视觉上显示不透明物体B显示在A前面</li>
</ul>
<p><strong>因此关闭深度写入，渲染顺序上多么重要:</strong><br>我们应该线渲染不透明物体，再渲染半透明物体，同理多是半透明物体也要符合一定的渲染顺序.</p>
<h2 id="Unity-Shader的渲染顺序"><a href="#Unity-Shader的渲染顺序" class="headerlink" title="Unity Shader的渲染顺序:"></a><strong>Unity Shader的渲染顺序:</strong></h2><p>SubShader使用Queue标签来决定哪个模型归于哪个渲染队列。unity内部使用整数索引来表示每个渲染队列的渲染顺序，索引值越小，表示越早被渲染。<br>当然，在每个队列中间，我们可以使用其它队列</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Tags&#123;<span class="hljs-string">"Queue"</span>=<span class="hljs-string">"Transparent"</span>&#125;</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>名称</th>
<th>队列索引号</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>Background</td>
<td>1000</td>
<td>这个队列中的物体会在所有其它队列之前被渲染,通常使用该队列来渲染需要绘制在背景上的物体</td>
</tr>
<tr>
<td>Geometry</td>
<td>2000</td>
<td>默认渲染队列,不透明物体使用此队列</td>
</tr>
<tr>
<td>AlphaTest</td>
<td>2450</td>
<td>需要进行透明度测试的物体使用此队列</td>
</tr>
<tr>
<td>Transparent</td>
<td>3000</td>
<td>这个队列中的物体会在所有Geometry和AlphaTest物体渲染后,再按从后往前的顺序进行渲染.任何使用了透明度混合的物体都应该使用该队列</td>
</tr>
<tr>
<td>Overlay</td>
<td>4000</td>
<td>该队列用于实现一些叠加效果，任何需要在最后渲染的物体都应该使用此队列</td>
</tr>
</tbody></table>
<h2 id="Blend-混合命令"><a href="#Blend-混合命令" class="headerlink" title="Blend 混合命令:"></a><strong>Blend 混合命令:</strong></h2><p>Blend是unity提供的设置混合模式的命令，想要实现半透明的效果就需要把当前自身的颜色和已经存在于颜色缓冲中的颜色进行混合，混合时使用的函数就上由该指令决定的。<br><strong>混合中的源颜色，目标颜色和输出颜色，它们都包含了RGBA四个通道的值，而并非仅仅是RGB通道</strong><br><strong>当进行混合时，需要使用2个混合等式:一个用于混合RGB通道，一个用于混合A通道</strong></p>
<table>
<thead>
<tr>
<th>语义</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>Blend Off</td>
<td>关闭混合</td>
</tr>
<tr>
<td>Blend SrcFactor DstFactor</td>
<td>开启混合，并设置混合因子,该片元产生的源颜色RGBA * SrcFactor + 缓冲区的颜色RGBA *DstFactor,相加后在存入颜色缓冲区</td>
</tr>
<tr>
<td>Blend SrcFactor DstFactor, SrcFactorA DstFactorA</td>
<td>和上面一样，只是使用不同的因子来混合A通道</td>
</tr>
<tr>
<td>Blend BlendOperation</td>
<td>混合操作</td>
</tr>
</tbody></table>
<p>SrcFactor,DstFactor：<br>为混合因子：</p>
<p>$O_{rgb}$ = SrcFactor  x  $S_{rgb}$ + DstFactor  x  $D_{rgb}$<br>$O_{a}$ = SrcFactorA  x  $S_{a}$ + DstFactorA  x  $D_{a}$</p>
<h4 id="混合因子"><a href="#混合因子" class="headerlink" title="混合因子"></a><strong>混合因子</strong></h4><p>ShaderLab支持多种混合因子</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>One</td>
<td>因子为1</td>
</tr>
<tr>
<td>Zero</td>
<td>因子为0</td>
</tr>
<tr>
<td>SrcColor</td>
<td>因子为源颜色值,当用于混合RGB的混合模式时，使用的上SrcColor的RGB分量作为混合因子，用于混合A模式时，使用的上SrcColor的A分量作为混合因子</td>
</tr>
<tr>
<td>SrcAlpha</td>
<td>因子为源颜色的透明度值A</td>
</tr>
<tr>
<td>DstColor</td>
<td>同SrcColor</td>
</tr>
<tr>
<td>DstAlpha</td>
<td>因子为目标颜色的透明度值A</td>
</tr>
<tr>
<td>OneMinusSrcColor</td>
<td>因子为(1-SrcColor),混合RGB模式时，使用因子的RGB分量，混合A模式时，使用因子的A分量</td>
</tr>
<tr>
<td>OneMinusSrcAlpha</td>
<td>因子为(1-SrcAlpha)</td>
</tr>
<tr>
<td>OneMinusDstColor</td>
<td>因子为(1-DstColor),混合RGB模式时，使用因子的RGB分量，混合A模式时，使用因子的A分量</td>
</tr>
<tr>
<td>OneMinusDstAlpha</td>
<td>因子为(1-DstAlpha)</td>
</tr>
</tbody></table>
<p>例如:<br>我们想要在混合后，输出颜色的透明度值就上源颜色的透明度<br>Blend srcAplha OneMinusSrcAlpha, One Zero</p>
<h4 id="混合操作"><a href="#混合操作" class="headerlink" title="混合操作"></a><strong>混合操作</strong></h4><p>BlendOp 命令<br>如:<br>BlendOp Add/Sub/Min </p>
<table>
<thead>
<tr>
<th>操作命令</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>Add</td>
<td>将混合后的源颜色RGBA和目标颜色RGBA相加,Unity默认的混合操作</td>
</tr>
<tr>
<td>Sub</td>
<td>将混合后的源颜色RGBA减去目标颜色RGBA</td>
</tr>
<tr>
<td>RevSub</td>
<td>将混合后的源颜色RGBA减去目标颜色RGBA</td>
</tr>
<tr>
<td>Min</td>
<td>从源颜色和目的颜色的RGBA每个分量中取一个最小的分量，组合为一个混合后的RGBA</td>
</tr>
<tr>
<td>Max</td>
<td>从源颜色RGBA和目标RGBA中取每个分量中的最大的分量组合一个RGBA</td>
</tr>
</tbody></table>
<p>混合操作命令通常上与混合因子命令一起工作的。需要注意的是，当使用Min或Max混合操作时，混合因子实际上是不起任何作用的，它们仅会判断原始的源颜色和目的颜色之间的比较结果。<br>没有设置混合操作的命令，则Unity默认使用加法操作，相当于BlendOp Add</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">//正常 ，透明度混合</span></span><br><span class="line">Blend SrcAlpha OneMinusSrcAlpha</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">//柔和相加</span></span><br><span class="line">Blend OneMinusDstColor One</span><br><span class="line"><span class="hljs-comment">//正片叠底，相乘</span></span><br><span class="line">Blend DstColor Zero</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">//2倍相乘</span></span><br><span class="line">Blend DstColor SrcColor</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">//变暗</span></span><br><span class="line">BlendOp Min</span><br><span class="line">Blend One One</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">//变亮</span></span><br><span class="line">BlendOp Max</span><br><span class="line">Blend One One</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">//线性减淡</span></span><br><span class="line">Blend One One</span><br></pre></td></tr></table></figure>

<p>列子:</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">Shader <span class="hljs-string">"MyTest/Test3/AlphaBlend"</span>&#123;</span><br><span class="line"></span><br><span class="line">	Properties&#123;</span><br><span class="line">		_Color(<span class="hljs-string">"Color"</span>,Color)=(<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>)</span><br><span class="line">		_MainTex(<span class="hljs-string">"Main Texture"</span>,<span class="hljs-number">2</span>D)=<span class="hljs-string">"white"</span>&#123;&#125;</span><br><span class="line">		_AlphaScale(<span class="hljs-string">"Alpha Scale"</span>,Range(<span class="hljs-number">0</span>,<span class="hljs-number">1</span>))=<span class="hljs-number">0</span></span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	SubShader&#123;</span><br><span class="line">		Tags&#123;<span class="hljs-string">"Queue"</span>=<span class="hljs-string">"Transparent"</span> <span class="hljs-string">"RenderType"</span>=<span class="hljs-string">"Transparent"</span> <span class="hljs-string">"IgnoreProjector"</span>=<span class="hljs-string">"true"</span>&#125;</span><br><span class="line"></span><br><span class="line">		Pass&#123;</span><br><span class="line">			Tags&#123;<span class="hljs-string">"LightMode"</span>=<span class="hljs-string">"Forwardbase"</span>&#125;</span><br><span class="line">			ZWrite Off</span><br><span class="line">			Blend SrcAlpha OneMinusSrcAlpha</span><br><span class="line"></span><br><span class="line">			CGPROGRAM</span><br><span class="line"></span><br><span class="line">			#include "Lighting.cginc"</span><br><span class="line">			#include "UnityCG.cginc"</span><br><span class="line"></span><br><span class="line">			fixed4 _Color;</span><br><span class="line">			sampler2D _MainTex;</span><br><span class="line">			float4 _MainTex_ST;</span><br><span class="line">			fixed _AlphaScale;</span><br><span class="line"></span><br><span class="line">			struct a2v&#123;</span><br><span class="line">				float4 pos:POSITION;</span><br><span class="line">				float3 normal:NORMAL;</span><br><span class="line">				float4 tex:TEXCOORD0;</span><br><span class="line">			&#125;;</span><br><span class="line"></span><br><span class="line">			struct v2f&#123;</span><br><span class="line">				float4 pos:SV_POSITION;</span><br><span class="line">				float2 uv:TEXCOORD0;</span><br><span class="line">				float3 worldpos:TEXCOORD1;</span><br><span class="line">				float3 worldnormal:TEXCOORD2;</span><br><span class="line">			&#125;;</span><br><span class="line"></span><br><span class="line">			#pragma vertex vert</span><br><span class="line">			#pragma fragment frag</span><br><span class="line"></span><br><span class="line">			v2f vert(a2v i)&#123;</span><br><span class="line">				v2f o;</span><br><span class="line">				o.pos = UnityObjectToClipPos(i.pos);</span><br><span class="line">				o.worldnormal = UnityObjectToWorldNormal(i.normal);</span><br><span class="line">				o.worldpos = mul(unity_ObjectToWorld,i.pos).xyz;</span><br><span class="line"></span><br><span class="line">				o.uv = TRANSFORM_TEX(i.tex,_MainTex);</span><br><span class="line">				<span class="hljs-keyword">return</span> o;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			fixed4 frag(v2f v):SV_Target</span><br><span class="line">			&#123;</span><br><span class="line">				float3 worldnormal = normalize(v.worldnormal).xyz;</span><br><span class="line">				float3 worldlight = normalize(UnityWorldSpaceLightDir(v.worldpos)).xyz;</span><br><span class="line"></span><br><span class="line">				fixed4 tex = tex2D(_MainTex,v.uv);</span><br><span class="line">				fixed3 albedo = tex.rgb * _Color.rgb;</span><br><span class="line">				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo.rgb;</span><br><span class="line">				fixed3 diffuse = _LightColor0.rgb * albedo.rgb * max(<span class="hljs-number">0</span>,dot(worldlight,worldnormal));</span><br><span class="line">				fixed3 color = ambient + diffuse;</span><br><span class="line">				<span class="hljs-comment">//透明度以纹素值A通道控制</span></span><br><span class="line">				<span class="hljs-keyword">return</span> fixed4(color,tex.a * _AlphaScale);</span><br><span class="line">			&#125;</span><br><span class="line">			ENDCG</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="开启深度写入的半透明效果"><a href="#开启深度写入的半透明效果" class="headerlink" title="开启深度写入的半透明效果"></a><strong>开启深度写入的半透明效果</strong></h2><p>关闭了深度写入，则模型内部透明效果无法隐藏，出现了显示一个透明物体内脏的情况。对于这种情况，一般使用2个Pass来渲染模型:<br>第一个Pass开启深度写入，但不输出颜色，它的目的仅仅上把该模型的深度值写入深度缓冲中，这样Z-Test时，会把片元在后面的剔除，达到了透明物内部不渲染的效果。第2个Pass进行正常的透明度混合，由于上一个Pass得到了逐像素的正确的深度信息，该Pass就可以按照像素级别的深度排序结果进行透明度渲染。</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Pass&#123;</span><br><span class="line">	ZWrite On</span><br><span class="line">	ColorMask <span class="hljs-number">0</span></span><br><span class="line">&#125;</span><br><span class="line">Pass&#123;</span><br><span class="line">	<span class="hljs-comment">//正常的透明度混合代码</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>ColorMask<br>用于设置颜色通道的写掩码<br>0|A：该Pass不写入任何颜色通道，既不会输出任何颜色。<br>R|G|B|RGB：该Pass写入对应的颜色通道</p>
<h2 id="双面渲染的透明效果"><a href="#双面渲染的透明效果" class="headerlink" title="双面渲染的透明效果"></a><strong>双面渲染的透明效果</strong></h2><p>在Unity中，默认情况下渲染引擎剔除了物体背面的渲染图元，而只渲染了物体的正面。我们可以使用Cull指令来控制需要剔除那个面的渲染图元</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Cull Back | Front | Off</span><br><span class="line">Back: 背对着camera的渲染图元不会被渲染，默认的剔除状态</span><br><span class="line">Front: 朝向Camera的渲染图元不会被渲染</span><br><span class="line">Off: 关闭剔除功能，所有渲染图元都会被渲染。</span><br></pre></td></tr></table></figure>

<h4 id="透明度测试的双面渲染"><a href="#透明度测试的双面渲染" class="headerlink" title="透明度测试的双面渲染"></a><strong>透明度测试的双面渲染</strong></h4><p>透明度测试的双面效果实现非常简单，只需要在Pass里面关闭Cull功能就可以。</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">SubShader&#123;</span><br><span class="line">	Tags&#123;<span class="hljs-string">"Queue"</span>=<span class="hljs-string">"AlphaTest"</span> <span class="hljs-string">"RenderType"</span>=<span class="hljs-string">"TransparentCutout"</span> <span class="hljs-string">"IgnoreProjector"</span>=<span class="hljs-string">"true"</span> &#125;</span><br><span class="line">		</span><br><span class="line">		Pass&#123;</span><br><span class="line">			</span><br><span class="line">			Cull Off</span><br><span class="line">			<span class="hljs-comment">//正常的透明度混合代码</span></span><br><span class="line">		&#125;</span><br><span class="line">	｝</span><br></pre></td></tr></table></figure>

<h4 id="透明度混合的双面渲染"><a href="#透明度混合的双面渲染" class="headerlink" title="透明度混合的双面渲染"></a><strong>透明度混合的双面渲染</strong></h4><p>和透明度测试相比，透明度混合实现双面渲染更复杂些，是因为透明度混合需要关闭深度写入，如果直接关闭Cull，就无法保证同一个物体的正面和背面图元的渲染顺序了，可能得到错误的半透明效果。<br>因此双面渲染的工作分2个Pass：第一个Pass只渲染背面，第二个Pass渲染正面，因此可以保证背面总是在正面之前渲染，从而保证了正确的深度渲染关系。</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">SubShader&#123;</span><br><span class="line">	Tags&#123;<span class="hljs-string">"Queue"</span>=<span class="hljs-string">"Transparent"</span> <span class="hljs-string">"RenderType"</span>=<span class="hljs-string">"Transparent"</span> <span class="hljs-string">"IgnoreProjector"</span>=<span class="hljs-string">"true"</span>&#125;</span><br><span class="line">		</span><br><span class="line">		Pass&#123;</span><br><span class="line">			</span><br><span class="line">			Cull Front</span><br><span class="line">			<span class="hljs-comment">//正常的透明度混合代码</span></span><br><span class="line">		&#125;</span><br><span class="line">		Pass&#123;</span><br><span class="line">			</span><br><span class="line">			Cull Back</span><br><span class="line">			<span class="hljs-comment">//正常的透明度混合代码</span></span><br><span class="line">		&#125;</span><br><span class="line">	｝</span><br></pre></td></tr></table></figure>
        </div>
        
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <span class="is-size-6 has-text-grey has-mr-7">#</span>
                    <a class="has-link-grey -link" href="/mystudy/tags/学习/">学习</a>
                </div>
            </div>
        </div>
        
        

        
        <div class="social-share"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js"></script>
        
    </div>
</div>





<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/mystudy/2020/06/04/shader学习8-多种光照/">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">shader学习8-多种光照</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/mystudy/2020/03/01/shader学习6-遮罩纹理/">
                <span class="level-item">shader学习6-遮罩纹理</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>


</div>
                




<div class="column is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
    
        
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                        <img class="image is-128x128 has-mb-6" src="/mystudy/images/avatar2.jpg" alt="满头大汉老黄牛">
                    
                    
                    <p class="is-size-4 is-block">
                        满头大汉老黄牛
                    </p>
                    
                    
                    <p class="is-size-6 is-block">
                        游戏
                    </p>
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>火星</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <p class="title has-text-weight-normal">
                        70
                    </p>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <p class="title has-text-weight-normal">
                        10
                    </p>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <p class="title has-text-weight-normal">
                        3
                    </p>
                </div>
            </div>
        </nav>
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/koliy/" target="_blank">
                关注我</a>
        </div>
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank"
                title="Github" href="https://github.com/koliy/">
                
                <i class="fab fa-github"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
    
        


    
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            <li>
        <a class="level is-marginless" href="/mystudy/categories/3D数学基础-图形与游戏开发/">
            <span class="level-start">
                <span class="level-item">3D数学基础:图形与游戏开发</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/AI/">
            <span class="level-start">
                <span class="level-item">AI</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">12</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/MySql/">
            <span class="level-start">
                <span class="level-item">MySql</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/SurfaceShader/">
            <span class="level-start">
                <span class="level-item">SurfaceShader</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/Unity/">
            <span class="level-start">
                <span class="level-item">Unity</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/git/">
            <span class="level-start">
                <span class="level-item">git</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/shade学习/">
            <span class="level-start">
                <span class="level-item">shade学习</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">33</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/xlua/">
            <span class="level-start">
                <span class="level-item">xlua</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/网络同步/">
            <span class="level-start">
                <span class="level-item">网络同步</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">10</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/设计模式/">
            <span class="level-start">
                <span class="level-item">设计模式</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">5</span>
            </span>
        </a></li>
            </ul>
        </div>
    </div>
</div>
    
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/09/">
                <span class="level-start">
                    <span class="level-item">九月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/07/">
                <span class="level-start">
                    <span class="level-item">七月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">23</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/06/">
                <span class="level-start">
                    <span class="level-item">六月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">17</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/02/">
                <span class="level-start">
                    <span class="level-item">二月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2019/09/">
                <span class="level-start">
                    <span class="level-item">九月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">5</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2019/08/">
                <span class="level-start">
                    <span class="level-item">八月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">18</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
    
        
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            标签云
        </h3>
        <a href="/mystudy/tags/game/" style="font-size: 15px;">game</a> <a href="/mystudy/tags/git/" style="font-size: 10px;">git</a> <a href="/mystudy/tags/学习/" style="font-size: 20px;">学习</a>
    </div>
</div>

    
    
        <div class="column-right-shadow is-hidden-widescreen is-sticky">
        
            
<div class="card widget" id="toc">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                目录
            </h3>
            <ul class="menu-list"><li>
        <a class="is-flex" href="#透明效果">
        <span class="has-mr-6">1</span>
        <span>透明效果</span>
        </a></li><li>
        <a class="is-flex" href="#深度缓冲-z-buffer">
        <span class="has-mr-6">2</span>
        <span>深度缓冲(z-buffer)</span>
        </a></li><li>
        <a class="is-flex" href="#透明度测试">
        <span class="has-mr-6">3</span>
        <span>透明度测试:</span>
        </a></li><li>
        <a class="is-flex" href="#透明度混合">
        <span class="has-mr-6">4</span>
        <span>透明度混合:</span>
        </a></li><li>
        <a class="is-flex" href="#渲染顺序">
        <span class="has-mr-6">5</span>
        <span>渲染顺序:</span>
        </a></li><li>
        <a class="is-flex" href="#Unity-Shader的渲染顺序">
        <span class="has-mr-6">6</span>
        <span>Unity Shader的渲染顺序:</span>
        </a></li><li>
        <a class="is-flex" href="#Blend-混合命令">
        <span class="has-mr-6">7</span>
        <span>Blend 混合命令:</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#混合因子">
        <span class="has-mr-6">7.1</span>
        <span>混合因子</span>
        </a></li><li>
        <a class="is-flex" href="#混合操作">
        <span class="has-mr-6">7.2</span>
        <span>混合操作</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#开启深度写入的半透明效果">
        <span class="has-mr-6">8</span>
        <span>开启深度写入的半透明效果</span>
        </a></li><li>
        <a class="is-flex" href="#双面渲染的透明效果">
        <span class="has-mr-6">9</span>
        <span>双面渲染的透明效果</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#透明度测试的双面渲染">
        <span class="has-mr-6">9.1</span>
        <span>透明度测试的双面渲染</span>
        </a></li><li>
        <a class="is-flex" href="#透明度混合的双面渲染">
        <span class="has-mr-6">9.2</span>
        <span>透明度混合的双面渲染</span>
        </a></li></ul></li></ul>
        </div>
    </div>
</div>

        
        </div>
    
</div>

                




<div class="column is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right is-sticky">
    
        
<div class="card widget" id="toc">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                目录
            </h3>
            <ul class="menu-list"><li>
        <a class="is-flex" href="#透明效果">
        <span class="has-mr-6">1</span>
        <span>透明效果</span>
        </a></li><li>
        <a class="is-flex" href="#深度缓冲-z-buffer">
        <span class="has-mr-6">2</span>
        <span>深度缓冲(z-buffer)</span>
        </a></li><li>
        <a class="is-flex" href="#透明度测试">
        <span class="has-mr-6">3</span>
        <span>透明度测试:</span>
        </a></li><li>
        <a class="is-flex" href="#透明度混合">
        <span class="has-mr-6">4</span>
        <span>透明度混合:</span>
        </a></li><li>
        <a class="is-flex" href="#渲染顺序">
        <span class="has-mr-6">5</span>
        <span>渲染顺序:</span>
        </a></li><li>
        <a class="is-flex" href="#Unity-Shader的渲染顺序">
        <span class="has-mr-6">6</span>
        <span>Unity Shader的渲染顺序:</span>
        </a></li><li>
        <a class="is-flex" href="#Blend-混合命令">
        <span class="has-mr-6">7</span>
        <span>Blend 混合命令:</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#混合因子">
        <span class="has-mr-6">7.1</span>
        <span>混合因子</span>
        </a></li><li>
        <a class="is-flex" href="#混合操作">
        <span class="has-mr-6">7.2</span>
        <span>混合操作</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#开启深度写入的半透明效果">
        <span class="has-mr-6">8</span>
        <span>开启深度写入的半透明效果</span>
        </a></li><li>
        <a class="is-flex" href="#双面渲染的透明效果">
        <span class="has-mr-6">9</span>
        <span>双面渲染的透明效果</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#透明度测试的双面渲染">
        <span class="has-mr-6">9.1</span>
        <span>透明度测试的双面渲染</span>
        </a></li><li>
        <a class="is-flex" href="#透明度混合的双面渲染">
        <span class="has-mr-6">9.2</span>
        <span>透明度混合的双面渲染</span>
        </a></li></ul></li></ul>
        </div>
    </div>
</div>

    
    
</div>

            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container1">
        <div class="level1">
            <div class="level-start1 has-text-centered-mobile1">
                <a class="footer-logo is-block has-mb-6" href="/mystudy/">
                

                
                </a>
                <p class="is-size-7">
                &copy; 2020 Koliy&nbsp;
                Powered by <a href="https://github.com/koliy/koliy.github.io" target="_blank">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a>
                
                <br>
                <span id="busuanzi_container_site_uv">
                共<span id="busuanzi_value_site_uv">0</span>个访客
                </span>
                
                </p>
            </div>
            <div class="level-end1">
            
            </div>
        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>

<script>
var IcarusThemeSettings = {
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>



    
    
    
    <script src="/mystudy/js/animation.js"></script>
    

    
    
    
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
    <script src="/mystudy/js/gallery.js" defer></script>
    

    
    

<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>


    
    
<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/unpacked/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    MathJax.Hub.Config({
        'HTML-CSS': {
            matchFontHeight: false
        },
        SVG: {
            matchFontHeight: false
        },
        CommonHTML: {
            matchFontHeight: false
        },
        tex2jax: {
            inlineMath: [
                ['$','$'],
                ['\\(','\\)']
            ]
        }
    });
});
</script>

    
    

<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/mystudy/js/back-to-top.js" defer></script>


    
    

    
    
    
    

    
    
    
    
    

    


<script src="/mystudy/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/mystudy/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/mystudy/js/insight.js" defer></script>
<link rel="stylesheet" href="/mystudy/css/search.css">
<link rel="stylesheet" href="/mystudy/css/insight.css"><!-- hexo-inject:begin --><!-- Begin: Injected MathJax -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({"tex2jax":{"inlineMath":[["$","$"],["\\(","\\)"]],"skipTags":["script","noscript","style","textarea","pre","code"],"processEscapes":true},"TeX":{"equationNumbers":{"autoNumber":"AMS"}}});
</script>

<script type="text/x-mathjax-config">
  MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
      all[i].SourceElement().parentNode.className += ' has-jax';
    }
  });
</script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js">
</script>
<!-- End: Injected MathJax -->
<!-- hexo-inject:end -->
    
</body>
</html>